<template>
  <div class="youke">
    <van-nav-bar
      :title="$route.meta.name"
      left-arrow
      fixed
      @click-left="onBack(`/user`)"
    ></van-nav-bar>
    <Main pb>
      <van-tabs
        v-model="activeInx"
        @change="choose_type"
        class="tabs-fixed"
      >
        <van-tab
          :title="item.title"
          v-for="(item,inx) in active"
          :key="inx"
        ></van-tab>
      </van-tabs>
      <component
        :is="componentId"
        :activeInx="activeInx"
      ></component>
    </Main>
  </div>
</template>

<script>

import guamai from "./modules/guamai";
import guamai1 from "./modules/guamai1";
import ontime from "./modules/ontime";
import wancheng from "./modules/wancheng";

export default {
  name: "OrderIndex",
  data() {
    return {
      active: [
        { type: 0, title: "挂卖" },
        { type: 1, title: "挂买" },
        { type: 2, title: "进行中" },
        { type: 3, title: "已完成" }
      ],
      activeInx: 0,
      componentId: "guamai"
      // list: [],
      // loading: true,
      // finished: false,
      // isLoading: false,
      // page: 1,
      // nolist: true,
      // clicked: false
    };
  },
  created() {},
  methods: {
    choose_type() {
      // this.page = 1;
      // this.list = [];

      // this.finished = false;
      // this.nolist = true;
      // this.clicked = true;
      // this.getList();

      switch (this.activeInx) {
        case 0:
          this.componentId = "guamai";
          break;
        case 1:
          this.componentId = "guamai1";
          break;
        case 2:
          this.componentId = "ontime";
          break;
        case 3:
          this.componentId = "wancheng";
          break;
        default:
          this.componentId = "guamai";
          break;
      }
    }
    // onLoad() {
    //   this.page += 1;
    //   this.clicked = false;
    //   this.getList();
    // },
    // onRefresh() {
    //   this.nolist = true;
    //   this.clicked = true;
    //   setTimeout(() => {
    //     this.$toast("刷新成功");
    //     this.isLoading = false;
    //     this.getList();
    //   }, 500);
    //   this.page = 1;
    //   this.list = [];
    // },
    // getList() {
    //   trads.order({ type: this.activeInx + 1, page: this.page }).then(res => {
    //     if (res.code == 1000) {
    //       if (Number(res.count) != 0 && res.result.length != 0) {
    //         if (this.clicked) {
    //           this.list = [...res.result];
    //         } else {
    //           this.list = [...this.list, ...res.result];
    //         }

    //         this.loading = false;
    //         this.nolist = true;
    //         if (this.list.length == Number(res.count)) {
    //           this.finished = true;
    //         }
    //       } else {
    //         this.list = [];
    //         this.nolist = false;
    //         this.loading = false;
    //         this.finished = true;
    //       }
    //     }
    //   });
    // }
  },
  components: {
    guamai,
    guamai1,
    ontime,
    wancheng
  },
  mounted() {}
};
</script>

<style scoped lang="less">
.tabs-fixed {
  position: fixed;
  top: 46px;
  left: 0;
  z-index: 90;
  width: 100%;
}

.refresh-main {
  padding-top: 44px;
}

.order-box {
  display: flex;
  align-items: center;

  .content {
    height: 4.5rem;

    img {
      height: 4rem;
      width: 4rem;
      border-radius: 50%;
    }

    .info {
      width: 17rem;
    }

    .common {
      position: relative;

      .span-right {
        position: absolute;
        right: 0;
      }
    }

    div {
      height: 1.4rem;
      line-height: 1.4rem;
      margin-left: 0.5rem;
    }

    .price,
    .amount {
      font-size: 12px;
      color: #afafaf;
    }

    .countdown {
      color: #000;
    }

    .red {
      color: red;
    }
  }
}
</style>